<template>
  <div class="app-container documentation-container">
    <div class="top">
      <el-form :rules="rules" ref="ruleForm" :label-position="labelPosition" label-width="100px" :model="enterprise">
        <el-row>
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-form-item label="注册类型">
                <el-select v-model="type" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="电话（账号）" prop="Telephone">
                <el-input type="number" v-model="enterprise.Telephone" width="100"></el-input>
              </el-form-item>
              <el-form-item label="初始密码" prop="pwd">
                <el-input v-model="enterprise.pwd"
                ></el-input>
                <el-button type="warning" v-if="typefalg == true" @click.native="restpassword">重置密码</el-button>

              </el-form-item>
              <el-form-item label="位置序号">
                <el-input v-model="enterprise.order"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="3">
            <div class="grid-content bg-purple-light"></div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple-light">
              <el-form-item label="企业名称">
                <el-input v-model="enterprise.name"></el-input>
              </el-form-item>
              <el-form-item label="企业编号">
                <el-input v-model="enterprise.number"></el-input>
              </el-form-item>
              <el-form-item label="地址" prop="address">
                <el-input v-model="enterprise.address"></el-input>
              </el-form-item>
              <el-form-item label="负责人" prop="keeper">
                <el-input v-model="enterprise.keeper"></el-input>
              </el-form-item>
              <el-form-item label="企业介绍">
                <el-input type="textarea" v-model="enterprise.introduce"></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" @click.native="onSubmit('ruleForm')">{{falg_text}}</el-button>
                <el-button type="success" v-if="typefalg == true" @click.native="dialogTableVisible = true">编辑图片</el-button>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <el-dialog title="添加企业图片" width="40%" :visible.sync="dialogTableVisible">
      <el-form :label-position="labelPosition" label-width="100px">
        <el-form-item label="身份证正面">
          <el-upload
            class="avatar-uploader"
            action="http://image.myjinyitech.com"
            :show-file-list="false"
            :before-upload="ID_Positive">
            <img v-if="IDZhengMianimageUrl" :src="IDZhengMianimageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="身份证反面">
          <el-upload
            class="avatar-uploader"
            action="http://image.myjinyitech.com"
            :show-file-list="false"
            :before-upload="ID_BACK">
            <img v-if="IDfanmianMianimageUrl" :src="IDfanmianMianimageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="其他资质">
          <el-upload
            class="upload-demo"
            action="http://image.myjinyitech.com"
            :before-remove="handleRemove"
            :before-upload="beforeUpload"
            name="image"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'

  export default {
    props: {},
    components: {
      mapGetters
    },
    data() {
      return {
        imgarr: {},
        IDZhengMianimageUrl: '',  //身份证正面
        IDfanmianMianimageUrl: '',//身份证反面
        falg_text: '注册',
        typefalg: false, //false 导航进入 true 编辑修改
        dataval: {},
        dialogTableVisible: false,
        IDPositive: this.$ENV.IDPOSITIVE,
        IDBACK: this.$ENV.IDBACK,
        IDother: '', //用户ID
        imgval: {},
        labelPosition: 'right',
        enterprise: {
          Telephone: '12211111111',
          pwd: '',
          order: '',
          name: '',
          number: '',
          address: '',
          keeper: '',
          introduce: ''
        },
        options: [{
          value: '1',
          label: '企业'
        }, {
          value: '2',
          label: '个体户'
        }],
        type: '1',
        fileList: [],
        rules: {
          Telephone: [
            { required: true, message: '请输入电话号码', trigger: 'blur' },
            { min: 11, max: 11, message: '电话号码长度不正确', trigger: 'blur' }
          ],
          pwd: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '请输入企业地址', trigger: 'blur' }
          ],
          keeper: [
            { required: true, message: '请输入负责人', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleRemove(file, fileList) {  //证书删除
        if (file && file.status === 'success') {

          this.$imgFn.seend({ 'path': fileList[0].url.slice(28) }).deleteimg(
            (ref) => {
              // console.log(ref);
              if (ref.status == 200) {
                if (ref.data.code == 200) {
                  this.$notify({
                    title: ref.data.Massage,
                    type: 'success'
                  })
                  this.fileList = fileList;
                }
              }
            }, (res) => {
              console.log(res)
            })
        }

        // deleteimg

      },
      beforeUpload(file) {  //证书图片上传
        if (this.$oneselfFn.IMAGEVAL(file)) {
          this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.IDother + this.$ENV.CERTIFICATE, file }).addimg(
            (ref) => {
              if (ref.status == 200) {
                this.fileList.push({
                  name: file.name,
                  url: ref.data.imageURL + '/' + ref.data.imagePath
                })
              }
            }, (res) => {
              console.log(res)
            })
        } else {
          this.$notify({
            title: '警告',
            message: '图片大小不能超过2M',
            type: 'warning'
          })
        }
        return false
      },
      ID_Positive(file) {  //身份证正面
        if (this.$oneselfFn.IMAGEVAL(file)) {
          this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.IDother + this.$ENV.IDPOSITIVE, file }).update(
            (ref) => {
              if (ref.status == 200) {
                this.IDZhengMianimageUrl = ref.data.imageURL + '/' + ref.data.imagePath
              }
            }, (res) => {
              console.log(res)
            })
        }
      return false;
      },
      ID_BACK(file) {  //身份证 反面
        if (this.$oneselfFn.IMAGEVAL(file)) {
          this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.IDother + this.$ENV.IDBACK, file }).update(
            (ref) => {
              if (ref.status == 200) {
                this.IDfanmianMianimageUrl = ref.data.imageURL + '/' + ref.data.imagePath
              }
            }, (res) => {
              console.log(res)
            })

        } else {
          this.$notify({
            title: '警告',
            message: '图片大小不能超过2M',
            type: 'warning'
          })
        }
        return false;
      },
      inputval(val) { //获取图片参数
        this.imgval = val
      },
      onSubmit(formName) { //注册企业
        var key = 'type'
        var value = this.type
        this.enterprise[key] = value
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.typefalg == false) {
              this.zhuce(this.enterprise)
            } else {
              this.xiugai(this.enterprise)
            }
          } else {
            return false
          }
        })
      },
      zhuce(val) {  //注册方法
        this.$apifn.addqiye(val).then((ref) => {
          if (ref.data.Response.code == 200) {
            this.dataval = ref.data.Response.data;
            this.IDother = ref.data.Response.data.id.toString();
            this.dialogTableVisible = true
          }
        }).catch((res) => {
          this.errflag(res.request.response.errors)
        })
      },
      xiugai(val) { //修改方法
        let data = {
          'id': val.id,
          'update': val
        }
        this.$apifn.editenterprises(data).then((ref) => {
          if (ref.data.Response.code == 200) {
            this.dataval = ref.data.Response.data;
            this.IDother = ref.data.Response.data.id.toString();
            this.dialogTableVisible = true;
          }
        }).catch((res) => {
          this.errflag(JSON.parse(res.request.response).errors)
        })
      },
      errflag(err) {  //公共报错处理
        Object.keys(err).forEach((key) => {
          switch (key) {
            case 'Telephone':
              this.$notify({
                title: '电话号码可能重复',
                type: 'warning', offset: 50
              })
              break
            case 'name':
              this.$notify({
                title: '企业名称可能重复',
                type: 'warning', offset: 150
              })
              break
            case 'number':
              this.$notify({
                title: '企业编号可能重复',
                type: 'warning', offset: 200
              })
              break
          }
        })
      }
      ,
      restpassword() {
        this.$confirm('此操作会默认密码重置为电话号码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$apifn.adminresetpassword({ 'i11': this.qiyeenterprise.id }).then((ref) => {
            if (ref.data.Response.code == 200) {
              this.$message({
                type: 'success',
                message: ref.data.Response.message
              })
            }
          }).catch((res) => {
            // console.dir(res.request);
            if (res.request.status == 422) {
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      }
      ,

      GET_IMG() { //获取所有图片
        // select
        this.$imgFn.seend({ 'path': this.$ENV.TRACING + this.qiyeenterprise.id }).select(
          (ref) => {
            if (ref.status == 200) {
              let data = this.$oneselfFn.ImageHandlefunction(ref.data);
                if (data != {}) {
                  if(data.Certificate){
                    data.Certificate.forEach((item, key) => {
                      this.fileList.push({
                        'name': key + 1,
                        'url': item
                      })
                    })
                  }
                  this.IDZhengMianimageUrl = data.IdPositive[0];
                  this.IDfanmianMianimageUrl = data.Idback[0];
                }
            }
          }, (res) => {
            console.log(res)
          }
        )
      }
    },
    watch: {},
    computed: {
      ...mapGetters([
          'qiyeenterprise'
        ])
    }
    ,
    created() {
      if (this.qiyeenterprise.id) {
        this.GET_IMG()

      }
    }
    ,
    mounted() {
      if (this.qiyeenterprise.id) {
        this.rules.pwd[0].required = false;
        this.enterprise = this.qiyeenterprise;
        this.typefalg = true;
        this.falg_text = '修改';
        this.IDother = this.qiyeenterprise.id;
        this.type =this.qiyeenterprise.type
      } else {

      }

      // console.log(this.$imgFn.seend({'path':'/a/a/1','file':"1"})._addimg());
      // console.log(this.$img);
      // this.$oneselfFn.deleteimage(this.$ENV.TRACING + this.qiyeenterprise.id+ this.$ENV.IDBACK);

    }
  }
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .app-container {

  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }

  }
  /*手机*/
  @media screen and (min-width: 100px) and (max-width: 960px) {
    .top {
      width: 100%;
      height: 147px;

    }

    .add_zhandian {
      width: 100%;
      height: 38px;
    }

    .selech {
      width: 100%;
      height: 50px;
    }
  }

  /*PC*/
  @media screen and (min-width: 960px) and (max-width: 1900px) {
    .top {
      width: 100%;
      height: 50px;
    }

    .add_zhandian {
      width: 20%;
      height: 100%;
      float: left;
    }

    .selech {
      width: 79%;
      height: 100%;
      float: right;

    }
  }

  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    /*background: #99a9bf;*/
  }

  .bg-purple {
    /*background: #d3dce6;*/
  }

  .bg-purple-light {
    /*background: #e5e9f2;*/
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    /*background-color: #f9fafc;*/
  }
</style>
